<!--  -->
<template>
  <view class="bg-img">
    <image
      src="https://7072-prod-6ge67ekha9fc55a1-1369779738.tcb.qcloud.la/paipan/pic11.png"
      class="big-img"
    ></image>
    <image
      @click="toDo"
      src="https://7072-prod-6ge67ekha9fc55a1-1369779738.tcb.qcloud.la/paipan/pic10.png"
      class="btn-wrap"
    ></image>

    <view class="explore">
      <view class="left-wrap">
        <image
          class="left-img"
          src="https://7072-prod-6ge67ekha9fc55a1-1369779738.tcb.qcloud.la/paipan/pic1.png"
        ></image>
        <view class="left">{{lottery.signStatus}}</view>
      </view>

      <view>
        <view>
          <view class="text1">中签： {{lottery.signStatus}}</view>
          <view class="text4">
            签文:<text class="text3"> {{lottery.signText}}</text>
          </view>
        </view>
        <view class="text2">
          解曰:<text class="text3"> {{lottery.signDesc}}</text></view>
      </view>
    </view>
  </view>
</template>

<script>
import { drawLots } from "@/api/eight/index";
export default {
  components: {},
  data() {
    return {
      lottery: {}
    };
  },
  created() {},
  methods: {
    toDo() {
      let that = this;
      drawLots().then(function (res) {
        that.lottery = res.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.bg-img {
  background-image: url("https://7072-prod-6ge67ekha9fc55a1-1369779738.tcb.qcloud.la/paipan/pic9.png");
  background-repeat: no-repeat;
}
.big-img {
  margin-top: 200rpx;
  width: 600rpx;
  height: 800rpx;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.btn-wrap {
  width: 400rpx;
  height: 164rpx;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.explore {
  margin: 30rpx 30rpx 0;
  display: flex;
  padding: 30rpx 0;
  border-top: 2rpx solid #852c27;
  .left-wrap {
    position: relative;
    margin-right: 45rpx;
  }
  .left {
    width: 40rpx;
    position: absolute;
    top: 38%;
    left: 63%;
    transform: translate(-50%, -50%);
    color: #b33932;
    font-size: 32rpx;
    font-weight: 600;
  }
  .left-img {
    width: 65rpx;
    height: 316rpx;
  }
  .text1 {
    font-size: 32rpx;
    color: #781d18;
    font-weight: 600;
  }
  .text2 {
    font-size: 26rpx;
    color: #781d18;
    font-weight: 600;
    .text3 {
      color: #784a18;
      font-weight: 400;
    }
  }
  .text4 {
    width: 427rpx;
    margin: 16rpx 0;
    font-size: 26rpx;
    color: #781d18;
  }
}
</style>
